<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>简易订阅链接生成后台</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        -o-font-smoothing: antialiased;
        font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body {
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 30px;
        color: #777;
        background: #0CF;
    }

    .container {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    #contact input[type="Number"],
    #contact input[type="time"],
    #contact input[type="date"],
    #contact textarea,
    #contact button[type="submit"] {
        font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif;
    }

    #contact {
        background: #F9F9F9;
        padding: 25px;
        margin: 5px 0;
    }

    #contact h3 {
        color: #F96;
        display: block;
        font-size: 30px;
        font-weight: 400;
    }

    #contact h4 {
        margin: 5px 0 15px;
        display: block;
        font-size: 13px;
    }

    fieldset {
        border: medium none !important;
        margin: 0 0 10px;
        min-width: 100%;
        padding: 0;
        width: 100%;
    }

    #contact input[type="Number"],
    #contact input[type="time"],
    #contact input[type="date"],
    textarea {
        width: 100%;
        border: 1px solid #CCC;
        background: #FFF;
        margin: 0 0 5px;
        padding: 10px;
    }

    #contact input[type="Number"]:hover,
    #contact input[type="time"]:hover,
    #contact input[type="date"]:hover,
    textarea:hover {
        -webkit-transition: border-color 0.3s ease-in-out;
        -moz-transition: border-color 0.3s ease-in-out;
        transition: border-color 0.3s ease-in-out;
        border: 1px solid #AAA;
    }

    textarea {
        height: 100px;
        max-width: 100%;
        resize: none;
    }

    #contact button[type="submit"] {
        cursor: pointer;
        width: 100%;
        border: none;
        background: #0CF;
        color: #FFF;
        margin: 0 0 5px;
        padding: 10px;
        font-size: 15px;
    }

    #contact button[type="submit"]:hover {
        background: #09C;
        -webkit-transition: background 0.3s ease-in-out;
        -moz-transition: background 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
    }

    #contact button[type="submit"]:active {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    #contact input:focus,
    #contact textarea:focus {
        outline: 0;
        border: 1px solid #999;
    }

    ::-webkit-input-placeholder {
        color: #888;
    }

    :-moz-placeholder {
        color: #888;
    }

    ::-moz-placeholder {
        color: #888;
    }

    :-ms-input-placeholder {
        color: #888;
    }
    .Setting_On {
    background-color: green;
}
.Setting_Off {
background-color: red;
}
.Setting_btn {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: none;
    margin: 0 auto;
	vertical-align: middle;
}
    </style>
</head>

<body>
    <div class="container">
        <div>
            <form id="contact" action="" onsubmit="return checkForm()" target="iframe">
                <h3>订阅生成后台</h3>
                <h4>本代码（包括后台）版权归涛之雨所有</h4>
                <fieldset>
                    <input id="id" placeholder="用户id（QQ号）" title="用户id（QQ号）" type="Number" tabindex="1" required="" autofocus="" min="10000" max="1000000000000000">
                </fieldset>
                <fieldset>
                    <input id="n" placeholder="获取节点的数量" title="获取节点的数量" type="Number" tabindex="2" required="" min="1" max="999999">
                </fieldset>
                <fieldset>
                    <input id="date" placeholder="VIP过期的日期" title="VIP过期的日期" type="date" tabindex="3" required="">
                    <input id="time" placeholder="VIP过期的时间" title="VIP过期的时间" type="time" tabindex="4" required="">
                </fieldset>
                <fieldset>
                    <input id="k" placeholder="校验码" title="请输入校验码" type="Number" tabindex="5" required="">
                </fieldset>
                <fieldset>
                	<div style="vertical-align: middle;"><label style="font-size: 20px;vertical-align: middle;font-family: Tahoma;" title="是否开启短连接"><span>短连接</span><input id="u" type="button" class="Setting_btn Setting_On"></label></div>
                    
                </fieldset>
                <fieldset>
                    <button type="submit" tabindex="7" id="submit">生成</button>
                </fieldset>
            </form>
            <iframe id="iframe" name="iframe" style="display:none;"></iframe>
            <fieldset>
                <textarea id="url" placeholder="" tabindex="-1" style="display: none;"></textarea>
            </fieldset>
        </div>
        <script type="text/javascript">

		$("#u").on('click',function(e){
			var IsOpen=!!!$(e.target).attr("class").match(/Setting_On/g);
			$(e.target).addClass(!IsOpen?"Setting_Off":"Setting_On");
			$(e.target).removeClass(!IsOpen?"Setting_On":"Setting_Off");
		});
        function checkForm() {
            $.ajax({
                type: 'get',
                url: '/s.php',
                dataType: 'text',
                data: {
                    "i": $("#id").val(),
                    "n": $("#n").val(),
                    "e": new Date($("#date").val().replace(/-/g, '/') + " " + $("#time").val()).getTime() / 1000,
                    "k": $("#k").val(),
                    "u": !!$("#u").attr("class").match(/Setting_On/g)?"1":"0",
                },
                success: function(data) {
                        $("#url").show();
                        $("#url").val(data);
                },
                error: function() {
                    $("#url").show();
                    $("#url").val("服务器错误！");
                }
            });
            return false;
        }
        $("#url").click(function() {
            copyToClip($("#url").val(), "已复制到您的剪贴板");
        });

        function copyToClip(content, message) {
            var aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            alert(message);
        }
        </script>
    </div>
</body>

</html>
